<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Product管理</title>
    <link rel="stylesheet" href="/myplugs/css/portal.css">
    <link rel="stylesheet" href="/myplugs/css/mycss.css">
    <link rel="stylesheet" href="/myplugs/css/floating_window.css">
    <link rel="stylesheet" href="/myplugs/css/add_new_float_window.css">
    <script src="http://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>

<div class="app-content pt-3 p-md-3 p-lg-4"  id="a">
    <div class="container-xl">
        <div class="row g-3 mb-4 align-items-center justify-content-between">
            <div class="col-auto">
                <a class="app-page-title mb-0">product管理</a>
                <svg onclick="addNewShowPopup()" style="cursor: pointer;margin-left: 6px" t="1680233617466" class="icon" viewBox="0 0 1024 1190" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4445" width="50" height="55">
                    <path d="M512 921.6a409.6 409.6 0 1 0 0-819.2 409.6 409.6 0 0 0 0 819.2zM460.8 460.8V332.8a25.6 25.6 0 0 1 25.6-25.6h51.2a25.6 25.6 0 0 1 25.6 25.6V460.8h128a25.6 25.6 0 0 1 25.6 25.6v51.2a25.6 25.6 0 0 1-25.6 25.6H563.2v128a25.6 25.6 0 0 1-25.6 25.6h-51.2a25.6 25.6 0 0 1-25.6-25.6V563.2H332.8a25.6 25.6 0 0 1-25.6-25.6v-51.2a25.6 25.6 0 0 1 25.6-25.6H460.8z" fill="#3DC389" p-id="4446">
                    </path></svg>
<!--                <button class="btn app-btn-secondary" onclick="addNewShowPopup()">新增</button>-->
            </div>

            <div class="col-auto">
                <div class="page-utilities">
                    <div class="row g-2 justify-content-start justify-content-md-end align-items-center">
                        <div class="col-auto">
                            <form class="table-search-form row gx-1 align-items-center" action="/selectProduct" method="get">
                                <div class="col-auto">
                                    <input type="text" id="search-orders" name="search"
                                           class="form-control search-orders" placeholder="请输入待搜索内容">
                                </div>
                                <div class="col-auto">
                                    <button type="submit" class="btn app-btn-secondary">搜索</button>
                                </div>
                            </form>
                        </div><!--//col-->
                    </div><!--//row-->
                </div><!--//table-utilities-->
            </div><!--//col-auto-->
        </div><!--//row-->


        <div class="row gy-4">
            <div class="col-12 col-lg-6"  th:each="product:${product}">
                <div class="app-card app-card-account shadow-sm d-flex flex-column align-items-start">
                    <div class="app-card-header p-3 border-bottom-0">
                        <div class="row align-items-center gx-3">
                            <div class="col-auto">
                                <div class="app-icon-holder">
                                    <svg t="1679584332228" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                         xmlns="http://www.w3.org/2000/svg" p-id="3435" width="200" height="200">
                                        <path d="M124.641235 557.046968c-11.967365 0-23.483131-6.548181-29.353914-17.16075-6.999779-12.418964-5.644983-27.773319 3.612789-38.611687 0 0 287.442558-340.505402 359.020948-425.631753 5.193385-6.322381 12.644763-10.38677 20.54774-11.741565 122.157442-18.967144 387.020066 138.866593 433.083131 328.086439 2.257993 9.257773 0.451599 18.741345-4.741786 26.644322-5.193385 7.902977-13.54796 13.096362-22.805733 14.676957L130.286218 556.595369c-1.806395 0.225799-3.612789 0.451599-5.644983 0.451599zM500.822933 130.060419c-58.933627 69.997795-207.509592 246.121279-291.055348 344.79559l624.335171-101.835502C776.298126 239.347299 588.207277 130.060419 501.951929 130.060419h-1.128996z"
                                              fill="#919191" p-id="3436"></path>
                                        <path d="M124.641235 1015.645424c-7.902977 0-15.580154-2.709592-21.902536-7.902976-7.677178-6.548181-11.967365-16.031753-11.967365-25.966924V523.177067c0-18.741345 15.128556-33.869901 33.869901-33.869901s33.869901 15.128556 33.869901 33.869901V941.583241l680.107607-118.318853 6.096582-423.37376a33.869901 33.869901 0 0 1 33.869901-33.418302h0.451599c18.741345 0.225799 33.644101 15.580154 33.418302 34.3215l-6.548181 451.598677c-0.225799 16.257552-11.967365 30.031312-27.999118 32.966703l-747.39581 129.83462c-1.806395 0.225799-3.838589 0.451599-5.870783 0.451598z"
                                              fill="#919191" p-id="3437"></path>
                                        <path d="M514.145094 196.897023m-112.89967 0a112.899669 112.899669 0 1 0 225.799339 0 112.899669 112.899669 0 1 0-225.799339 0Z"
                                              fill="#FFFFFF" p-id="3438"></path>
                                        <path d="M514.145094 343.440794c-80.836163 0-146.76957-65.707607-146.76957-146.76957s65.933407-146.76957 146.76957-146.76957 146.76957 65.707607 146.76957 146.76957-65.707607 146.76957-146.76957 146.76957z m0-225.573539c-43.579272 0-79.029768 35.450496-79.029769 79.029768s35.450496 79.029768 79.029769 79.029769 79.029768-35.450496 79.029768-79.029769-35.450496-79.029768-79.029768-79.029768zM124.641235 782.394708c-16.257552 0-30.482911-11.741566-33.418302-28.224917-3.161191-18.515546 9.257773-35.902095 27.773318-39.063286l750.782801-127.576626c18.515546-2.935391 35.902095 9.257773 39.063285 27.773318s-9.257773 35.902095-27.773318 39.063286L130.512018 781.943109c-2.032194 0.225799-3.838589 0.451599-5.870783 0.451599z"
                                              fill="#919191" p-id="3439"></path>
                                    </svg>
                                </div><!--//icon-holder-->
                            </div><!--//col-->
                            <div class="col-auto">
                                <h4 class="app-card-title">信息展示</h4>
                            </div><!--//col-->
                        </div><!--//row-->
                    </div><!--//app-card-header-->

                    <div class="app-card-body px-4 w-100" id="aa" th:each="product:${product}" >
                        <div class="item border-bottom py-3">
                            <div class="row justify-content-between align-items-center">
                                <div class="col-auto" style="display: flex;">
                                    <div class="test">
                                    <div class="item-label mb-2"><strong>Picture</strong></div>
                                    <div class="item-data"><img class="profile-image" th:src="${product.picture}!=null?${product.picture}:'/images/black.jpg'"/></div>
                                    </div>
                                    <div style="margin-left: 20px;padding-top: 30px;line-height: 40px;font-size: 20px;color: #15a362;">
                                    <div class="col-auto" >
                                        <div class="item-label"><strong>Name</strong></div>
                                        <div class="btn app-btn-secondary "th:text="${product.name}"></div>
                                    </div><!--//col-->
                                    <div class="col-auto" id="bb">
                                        <div class="item-label"><strong>ProductId</strong></div>
                                        <div class="btn app-btn-secondary " id="thisProductId" th:data-index="${product.productId}" th:text="${product.productId}"></div>
                                    </div><!--//col-->
                                    </div>
                                </div><!--//col-->
                            </div><!--//row-->
                        </div><!--//item-->

<!--                        <div class="item border-bottom py-3">-->
<!--                            <div class="row justify-content-between align-items-center">-->

<!--                            </div>-->
<!--                        </div>-->



                        <div class="app-card-footer p-4 mt-auto">
                            <div class="col text-end pic">
                                <button class="btn app-btn-secondary deleteProduct">删除</button>
                                <input class="btn app-btn-secondary file" type="file" name="file" style="width: 180px;">
                                <a style="display: none" th:text="${product.productId}" name="productId" class="productId"/>
                                <button class="btn app-btn-primary upload">确定修改图片</button>
                                <button class="btn app-btn-secondary inf" id="CorrectMoreInformation"
                                        onclick="showPopup()">修改更多</button>
                            </div>
                        </div>
                    </div>



<!--                                <div class="col-auto">-->
<!--                                    <div class="item-label mb-2"><strong>Picture</strong></div>-->
<!--                                    <div class="item-data"><img class="profile-image" th:src="${product.picture}"></div>-->
<!--                                </div>&lt;!&ndash;//col&ndash;&gt;-->
<!--                                <div class="col text-end pic">-->
<!--                                    &lt;!&ndash;                                    <form id="uploadForm">&ndash;&gt;-->
<!--                                    <input class="btn-sm app-btn-secondary file" type="file" name="file">-->
<!--                                    <a style="display: none" th:text="${product.productId}" name="productId" class="productId"/>-->
<!--                                    <button class="btn-sm app-btn-secondary upload">上传图片</button>-->
<!--                                    &lt;!&ndash;                                    </form>&ndash;&gt;-->
<!--                                </div>&lt;!&ndash;//col&ndash;&gt;-->

<!--                            </div>&lt;!&ndash;//row&ndash;&gt;-->
<!--                        </div>&lt;!&ndash;//item&ndash;&gt;-->

<!--                        <div class="item border-bottom py-3">-->
<!--                            <div class="row justify-content-between align-items-center">-->
<!--                                <div class="col-auto" >-->
<!--                                    <div class="item-label"><strong>Name</strong></div>-->
<!--                                    <div class="btn app-btn-secondary "th:text="${product.name}"></div>-->
<!--                                </div>&lt;!&ndash;//col&ndash;&gt;-->
<!--                                <div class="col text-end">-->
<!--                                    <a class="btn-sm app-btn-secondary"  onclick="showPopup()" >修改Name</a>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        <div class="item border-bottom py-3">-->
<!--                            <div class="row justify-content-between align-items-center">-->
<!--                                <div class="col-auto" id="bb">-->
<!--                                    <div class="item-label"><strong>ProductId</strong></div>-->
<!--                                    <div class="btn app-btn-secondary " id="thisProductId" th:data-index="${product.productId}" th:text="${product.productId}"></div>-->
<!--                                </div>&lt;!&ndash;//col&ndash;&gt;-->
<!--                                <div class="col text-end">-->
<!--                                    <a class="btn-sm app-btn-secondary" >修改Id</a>-->
<!--                                </div>&lt;!&ndash;//col&ndash;&gt;-->
<!--                            </div>&lt;!&ndash;//row&ndash;&gt;-->
<!--                        </div>&lt;!&ndash;//item&ndash;&gt;-->


<!--                        <div class="app-card-footer p-4 mt-auto">-->
<!--                            <a class="btn app-btn-secondary " th:class="inf" id="CorrectMoreInformation"-->
<!--                              onclick="showPopup()">修改更多信息</a>-->
<!--                        </div>-->
<!--                    </div>-->

                </div>
            </div><!--//col-->
        </div><!--row-->
  </div>
</div><!--app-content-->


<!-- 弹窗修改更多信息    position: absolute; top: 25%; left: 25%; width: 55%; height: 55%;-->
<div class="overlay" id="overlay" style="display: none;">
<form method="post" action="update_product_information" >
    <div class="popup row gy-4" id="popup" style="display: none; ">
        <div class="app-card-footer p-2 mt-auto">
            <a class="my-css-a">修改更多信息</a>
        </div>
        <div>
            <div>
                <label class="form-label"><strong>productId</strong></label>
                <input class="form-control" id="productId" name="productId" readonly="readonly"/>

                <label class="form-label"><strong>category</strong></label>
                <input class="form-control" id="categoryId" name="categoryId"/>
            </div>
            <div>
                <label class="form-label"><strong>name</strong></label>
                <input class="form-control" id="name" name="name"/>
            </div>
            <span class="my-css-card">
                <div class="app-card-footer p-4 mt-auto">
                    <button type="submit" class="btn app-btn-primary" onclick="hidePopup()">保存所有信息</button>
                    <button class="btn app-btn-secondary" type="button" onclick="hidePopup()">取消</button>
                </div>
            </span>
        </div>
    </div>
</form>
</div>


<!--弹窗-->
<div class="overlay" id="addNewOverlay" style="display: none;"></div>
<form method="post" action="/Products/singleProduct" enctype="multipart/form-data">
    <div class="addNewPopup gy-4 app-card" id="addNewPopup" style="display: none;position: absolute; top: 45%; left: 45%; width: 65%; height: 65%">
        <div class="app-card-footer p-2-2 mt-auto">
            <a class="my-css-a">商品新增</a>
        </div>
        <div>
            <div>
                <label class="form-label"><strong>productId</strong></label>
                <input class="form-control" id="productId2" name="productId"/>

                <label class="form-label"><strong>category</strong></label>
                <input class="form-control" id="categoryId2" name="categoryId"/>
            </div>

            <div>
                <label class="form-label"><strong>name</strong></label>
                <input class="form-control" id="name2" name="name"/>
            </div>

        </div>

        <span class="my-css-card">
        <div class="app-card-footer p-4 mt-auto">
            <button type="submit" class="btn app-btn-primary" onclick="addNewHidePopup()">保存所有信息</button>
            <button class="btn app-btn-secondary" type="button" onclick="addNewHidePopup()">取消</button>
        </div>
        </span>
    </div>
</form>

<script src="/myplugs/js/floating_window.js"></script>
<script src="/myplugs/js/product_floating_window.js"> </script>
<script src="/myplugs/js/add_new_float_window.js"></script>

</body>
</html>